<!--客户定位-->
<template>
  <div class="cus-msg-box"
       v-loading="loading"
       element-loading-customClass="ne-loading"
       element-loading-background="rgba(255, 255, 255, 0.6)">
    <el-breadcrumb class="ne-padding-t-10" separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ secTitel }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10" style="height: calc(100% - 24px);box-sizing:border-box;overflow-y:auto;">
      <el-col :span="5">
        <div class="grid-content bg-purple cus-message-left">
          <div class="ne-outer">
            <div class="cus-info">
              <div class="image-box flex flex-center">
                <div class="img-box flex flex-center">
                  <img src="~@/assets/imgs/order/logo2.png" alt="" />
                </div>
              </div>
              <div class="change-user" @click="dialogVisible = true">
                <i class="iconfont icon-qiehuan"></i>
                <span>切换客户</span>
              </div>

<!--              <el-button type="primary" size="mini" @click="LCtext">-->
<!--                服开订单重发-->
<!--              </el-button>-->
<!--              <el-button type="primary" size="mini" @click="LJtext">-->
<!--                两级订单下发-->
<!--              </el-button>-->
<!--              <el-button type="primary" size="mini" @click="DCtext">-->
<!--                两级DCOOS订单下发-->
<!--              </el-button>-->
              <div id="kehuinfo" style="display: block">
                <p class="name" id="khname">
                  {{ cusInforData.custName ? cusInforData.custName : "" }}
                </p>
                <div v-show="cusInforData" class="info-spacific">
                  <!--              <div class="info-spacific">-->
                  <p class="flex">
                    <b>客户编码：</b><span>{{ cusInforData.custNumber ? cusInforData.custNumber : ""}}</span>
                  </p>
                  <p class="flex">
                    <b>客户地址：</b><span>{{ cusInforData.custAddr ? cusInforData.custAddr : "" }}</span>
                  </p>
                  <p class="flex">
                    <b>客户经理名称：</b
                    ><span>{{ cusInforData.custManagerNameA ? cusInforData.custManagerNameA : ""}}</span>
                  </p>
                  <p class="flex">
                    <b>客户联系人姓名：</b
                    ><span>{{ cusInforData.contactName ? cusInforData.contactName : ""}}</span>
                  </p>
                  <p class="flex">
                    <b>客户经理电话：</b
                    ><span>{{ cusInforData.manageMobilePhone ? cusInforData.manageMobilePhone : ""}}</span>
                  </p>
                  <p class="flex">
                    <b>联系EMAIL:</b>
                    <span>{{ cusInforData.contactEmail ? cusInforData.contactEmail : ""}}</span>
                  </p>
                  <p class="flex">
                    <b>客户等级：</b>
                    <span>{{ cusInforData.bigCustGrade ? cusInforData.bigCustGrade : ""}}</span>
                  </p>
                  <p class="flex">
                    <b>客户经理EMAIL：</b
                    ><span>{{ cusInforData.manageEmail ? cusInforData.manageEmail : ""}}</span>
                  </p>
                </div>
              </div>
            </div>
            <ul class="cus-menu clearfix" style="height: auto">
              <li>
                <a @click="doOrderPreTask('13241001')">
                  <div class="flex flex-center i-box-shadow">
                    <div class="flex  i-box">
                      <span class="m-box">
                      <i class="ne-o-icon dinggou"/>
                      </span>
                        <div class="title-box">订  购</div>
                    </div>
                  </div>
                </a>
              </li>
               <li>
                <a @click="doBuDianTask">
                  <div class="flex flex-center i-box-shadow">
                    <div class="flex flex-center i-box">
                      <span class="m-box">
                        <i class="ne-o-icon budian" />
                       </span>
                        <div class="title-box">补  点</div>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                  <a @click="doTmpPreTask">
                    <div class="flex flex-center i-box-shadow">
                      <div class="ne-i-box">
                        <div class="flex flex-center i-box">
                          <i class="ne-o-icon zancundan" />
                           <div class="title-box">暂存单管理</div>
                        </div>
                      </div>
                    </div>
                  </a>
              </li>
               <li v-if="gmOrder">
                <a @click="doOrderPreTask('13241004')">
                    <div class="flex flex-center i-box-shadow">
                      <div class="ne-i-box">
                        <div class="flex flex-center i-box">
                          <i class="ne-o-icon budian" />
                           <div class="title-box">公免订购</div>
                        </div>
                      </div>
                    </div>

                  </a>
              </li>
              <li v-if="false">
                  <a @click="doOrderPreTask('13241003')">
                    <div class="flex flex-center i-box-shadow">
                      <div class="ne-i-box">
                        <div class="flex flex-center i-box">
                          <i class="ne-o-icon budian" />
                           <div class="title-box">工程订购</div>
                        </div>
                      </div>
                    </div>
                  </a>
              </li>
              <li v-if="false">
                  <a @click="doOrderPreTask('13241002')">
                    <div class="flex flex-center i-box-shadow">
                      <div class="ne-i-box">
                        <div class="flex flex-center i-box">
                          <i class="ne-o-icon budian" />
                           <div class="title-box">公纳订购</div>
                        </div>
                      </div>
                    </div>
                  </a>
              </li>


<!--
              <li>
                <a>
                  <div class="flex flex-center i-box-shadow">
                    <div class="flex flex-center i-box">
                      <i class="ne-o-icon bulu" />
                    </div>
                  </div>
                  <p>补录</p>
                </a>
              </li> -->

            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <!--				<dic-tags :crumbs="crumbsString" :tags="tagsArr" class="tagsbox"></dic-tags>-->
        <div class="m-content-box">
          <step-nav
            style="margin-bottom: 0.1rem"
            justify="center"
            :active="stepNav.active"
            :colSize="12"
            :step-data="stepNav.stepData"
          ></step-nav>
          <el-tabs
            v-model="tabConfig.editableTabsValue"
            type="card"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              :key="index"
              v-for="(item, index) in tabConfig.editableTabs"
              :label="item.title"
              :name="item.name"
              :closable="item.closable"
            >
              <!-- 组件会在 `currentTabComponent` 改变时改变 -->
              <component :is="item.content" :tabConfig='tabConfig'></component>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="90%"
    >
      <pos-customer :dialogTitle.sync="dialogTitle" :show.sync="dialogVisible"></pos-customer>
    </el-dialog>
    <province-custpicker
      @updateshow="custPickerShowHandler"
      @pickerEnd="pickerEnd"
      @prohsChange="prohsChange"
      :show="orderPreTaskVisible"
      :Data="provData"
    >
    </province-custpicker>
    <el-dialog
        custom-class="ne-sc-dialog"
        title="当前集团客户未查询到省内客户，将自动同步客户至以下区域"
        v-if="provdVisible"
        :visible.sync="provdVisible"
        width="25%"
    >
      <el-form :inline="false" :model="provdForm" class="ne-prov-form" label-width=".7rem">
        <el-form-item label="省：">
          <el-select v-model="provdForm.province" placeholder="请选择" :disabled="provdForm.provinceOpt.length<=1">
            <el-option v-for="(item,index) in provdForm.provinceOpt" :key="index" :label="item.regionName" :value="item.regionId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市：">
          <el-select v-model="provdForm.city" placeholder="请选择" filterable :disabled="provdForm.cityOpt.length<=1">
            <el-option v-for="(item,index) in provdForm.cityOpt" :key="index" :label="item.regionName" :value="item.regionId"></el-option>
          </el-select>
        </el-form-item>
        <div class="text-center">
          <el-button type="primary" @click="prodOnSubmit">确认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { Dialog } from "element-ui";
import posCustomer from "@/components/order/PosCustomer";
import StepNav from "@/components/public/StepNav";
import OrderList from "@/components/order/OrderList";
import ChangeOrder from "@/components/order/ChangeOrder";
import DismListOrder from "@/components/order/DismListOrder";
// import DicTags from "@/components/public/tags/DicTags";
import ProvinceCustpicker from "@/components/order/ProvinceCustpicker";
import OrderService from "@/api/order/OrderService";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      secTitel:'业务受理',
      loading: false,
      dialogTitle:'客户定位',
      provdForm:{
        province:'',
        city:'',
        provinceOpt:[],
        cityOpt:[]
      },
      orderCode: null,
      provData: {},
      selectedOptions: [],
      provdVisible: false,
      upcustVisible: true,
      upcustTitle: "经查询，系统当前客户下无对应的省客户，是否自动同步省内",
      orderPreTaskVisible: false,
      // custId: 111,
      tabConfig: {
        editableTabsValue: "orderList",
        editableTabs: [
          {
            title: "订单列表",
            name: "orderList",
            content: "OrderList",
            closable: false,
          },
        ],
        tabIndex: 2,
      },
      crumbsString: "客户信息",
      tagsArr: [{ name: "产品明细", type: "" }],
      dialogVisible: false,
      // 客户详情数据
      cusInforData: "",
      gmOrder:false,//公免订购按钮是否显示
    };
  },
  computed: {
    ...mapState("user", ["user"]),
    ...mapState("orders", ["stepNav"]),
    ...mapState("orders", ["orderPosInfo"]),
    ...mapGetters(["orderPosInfochange"]),
  },
  watch: {
    orderPosInfochange: function () {
      this.cusInforMsg();
    },
  },
  components: {
    posCustomer,
    Dialog,
    StepNav,
    OrderList,
    // DicTags,
    ProvinceCustpicker,
    ChangeOrder,
    DismListOrder
  },
  created() {
    this.cusInforMsg();
    localStorage.removeItem("FormModel");
    let orgList = ['1944889','1944640','1978013','1944891','1944890','1950850','1950655']
    if(orgList.indexOf(this.user.orgId) != -1){
       this.gmOrder = true;
    }
    if(this.$route.query.proFlag){
      sessionStorage.setItem('proFlag',this.$route.query.proFlag)
      this.secTitel = '5G受理'
    }else {
      //入口进入没有5G标识的清除产品标识缓存
      sessionStorage.removeItem('proFlag')
    }
  },
  mounted() {
    // let param={};
    // OrderService.gryCustList(param).then((response)=>{
    //   
    // });

  },
  methods: {
    // LCtext(){
    //   // this.$router.push({ path: "/InterfaceByBusiPage" });
    //   window.open("orders.html?router=InterfaceByBusiPage", "_blank");
    // },
    // LJtext(){
    //   // this.$router.push({ path: "/TestSendRestPage" });
    //   window.open("orders.html?router=TestSendRestPage", "_blank");
    // },
    // DCtext(){
    //   // this.$router.push({ path: "/govProdOrderSendAgPage" });
    //   window.open("orders.html?router=govProdOrderSendAgPage", "_blank");
    // },
    doBuDianTask(){
      this.$alert('<div class="text-center" style="padding-top: .1rem;"><i class="ne-await iconfont icon-jingqingqidai01" style="font-size: .6rem; color:#f56d39;"></i><p style="padding-top: .1rem;">功能暂未开放,敬请期待！</p></div>', '', {
        dangerouslyUseHTMLString: true
      });
    },
    changeTabCon(tabConfig) {
      this.tabConfig = tabConfig;
    },
    removeTab(targetName) {
      let tabs = this.tabConfig.editableTabs;
      let activeName = this.tabConfig.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.tabConfig.editableTabsValue = activeName;
      this.tabConfig.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
    // 客户详情信息
    cusInforMsg() {
      if (!this.orderPosInfo.custId) {
        this.dialogVisible = true;
      } else {
        this.cusInforData = this.orderPosInfo.custMsg;
        this.dialogVisible = false;
      }
    },
    doTmpPreTask(){
      if (this.orderPosInfo.custId) {
        this.$router.push({
          path: "ordertemp",
        });
      } else {
        // 没选择客户时提示
        this.$confirm("请先选择客户！", "提示", {
          confirmButtonText: "知道了",
          type: "warning",
          showCancelButton: false,
          center: true,
        }).then((done) => {
          done();
        });
      }
    },
    /**
     * 订购前置任务
     */
    async doOrderPreTask(code) {
      this.loading = true;
      this.orderCode = code;
      // 判断是否是省客户:接口名:getTestProvCount
      let pilotResult = await OrderService.isPilotProvince({
        regionId: this.user.regionId,
        regionCode: this.user.regionCode,
        regionType: this.user.regionType,
      });
      // let isPilot = pilotResult.meta.resultObject.total;
      let isPilot = pilotResult.meta.count;

      // let isPilot = "0"; //暂时屏蔽前置任务,直接跳转到新建项目
      if (isPilot == "0") {
        //非试点省:直接跳转到新建项目页面;
        this.loading = false;
        this.goOrderAddPage();
      } else {
        //加载省客户关系
        let pageInfo={
          pageIndex: 1,
          pageSize: 10
        };
        const ctResult = await this.loadCustList(pageInfo);
        this.loading = false;
        // let custlist = {"code":200,"msg":"OK","count":0,"meta":{
        //     "contractRoot": {
        //       "tcpCont": {
        //         "transactionId": "202104161718201382986708957528064",
        //         "reqTime": "20210720122119811",
        //         "sign": "",
        //         "svcCode": "2020150002",
        //         "apiCode": "2020150002",
        //         "appKey": "99",
        //         "dstSysId": "CRM-InterFace",
        //         "version": "1.0",
        //         "globalId": "20211382986708076724224"
        //       },
        //       "svcCont": {
        //         "resultObject": {
        //           "total": "2",
        //           "resultCode": 1,
        //           "resultMsg": "请求成功",
        //           "customer": [
        //             {
        //               "statusCd": "",
        //               "certNums": [
        //                 {
        //                   "certType": "49",
        //                   "certNum": ""
        //                 },
        //                 {
        //                   "certType": "15",
        //                   "certNum": "MA6CTA573"
        //                 },
        //                 {
        //                   "certType": "7",
        //                   "certNum": "MA6CTA575"
        //                 },
        //                 {
        //                   "certType": "6",
        //                   "certNum": ""
        //                 },
        //                 {
        //                   "certType": "43",
        //                   "certNum": ""
        //                 }
        //               ],
        //               "custName": "中国公司-成都市娇韵馨化妆品有限公司",
        //               "partyType": "2",
        //               "orgUscc": "91510104MA6CTA573X",
        //               "commonRegionName": "北京",
        //               "provRegionName": "北京",
        //               "industryCd": "CT100301",
        //               "controlType": "",
        //               "idExpDate": "2029-03-26",
        //               "commonRegionId": "8110100",
        //               "controlLevel": "",
        //               "custManagerTeams": [],
        //               "keyPersons": [],
        //               "custId": "400000213006",
        //               "custNumber": "400000213006",
        //               "registerAddr": "成都市锦江区龙舟路南街62号2层附2号",
        //               "idEffDate": "2017-06-28",
        //               "partyNumber": "JT2019040300002080",
        //               "partyId": "820107790",
        //               "provRegionCode": "8110100",
        //               "contacts": [],
        //               "createDate": ""
        //             },
        //             {
        //               "statusCd": "",
        //               "certNums": [
        //                 {
        //                   "certType": "49",
        //                   "certNum": ""
        //                 },
        //                 {
        //                   "certType": "15",
        //                   "certNum": "MA6CTA573"
        //                 },
        //                 {
        //                   "certType": "7",
        //                   "certNum": "MA6CTA575"
        //                 },
        //                 {
        //                   "certType": "6",
        //                   "certNum": ""
        //                 },
        //                 {
        //                   "certType": "43",
        //                   "certNum": ""
        //                 }
        //               ],
        //               "custName": "中国公司-成都市娇韵馨化妆品有限公司",
        //               "partyType": "2",
        //               "orgUscc": "91510104MA6CTA573X",
        //               "commonRegionName": "北京",
        //               "provRegionName": "北京",
        //               "industryCd": "CT100301",
        //               "controlType": "",
        //               "idExpDate": "2029-03-26",
        //               "commonRegionId": "8110100",
        //               "controlLevel": "",
        //               "custManagerTeams": [
        //                 {
        //                   "staffCode": "147",
        //                   "mobilePhone": "15555079821",
        //                   "staffName": "罗通",
        //                   "staffId": "22507138"
        //                 }
        //               ],
        //               "keyPersons": [],
        //               "custId": "850000184002",
        //               "custNumber": "850000184002",
        //               "registerAddr": "成都市锦江区龙舟路南街62号2层附2号",
        //               "idEffDate": "2017-06-28",
        //               "partyNumber": "JT2019040300002080",
        //               "partyId": "820107790",
        //               "provRegionCode": "8110100",
        //               "contacts": [
        //                 {
        //                   "mobilePhone": "13891528034",
        //                   "contactName": "秦民勇",
        //                   "eMail": ""
        //                 }
        //               ],
        //               "createDate": ""
        //             }
        //           ],
        //           "step": "4"
        //         }
        //       }
        //     }
        //   }};
        if(~~ctResult.code==200){
          if(ctResult.meta.customer && ctResult.meta.customer.length>0){
            this.provData = ctResult.meta;
            this.orderPreTaskVisible = true;
          }else{
            this.openAutoAsyncPrompt();
          }
        }
      }
    },
    async prohsChange(arg){
      const ctResult = await this.loadCustList(arg);
      if(~~ctResult.code==200){
        if(ctResult.meta.customer.length>0){
          this.provData = ctResult.meta;
        }
      }
    },
    /**
     * 父级更改控制dialog的显示隐藏
     */
    custPickerShowHandler(val) {
      this.orderPreTaskVisible = val;
    },

    /**
     * 监听省客户选择完成
     */
    async pickerEnd(item) {
      
      let param = {
        actType: "ADD",
        custId: this.orderPosInfo.custId,
        provinceCustId: item.custId,
        jtCustNumber: this.orderPosInfo.custMsg.custNumber,
        provinceCustNumber: item.custNumber,
        provinceCustName: item.custName,
        provinceId: item.commonRegionId,
        lanId: item.commonRegionId,
        staffId: this.user.staffId,
        statusCd: "1000"
      };
      let result = await OrderService.insertProvinceCustRel(param);
      if (result.meta.resultCode=='0') {
        this.$store.commit('orders/SET_RESP_CUSTID',item.custId);
        this.goOrderAddPage();
      }else{
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: "error",
        });
      }
      console.log(
        "pickerEnd获取到：",
        item,
        "参数格式：",
        param,
        "返回结果",
        result
      );
    },

    /**
     * 跳转到新建项目页面
     */
    goOrderAddPage() {
      if (this.orderPosInfo.custId) {
        // 新建订单、信息录入需要清缓存刷新数据
        this.$router.options.routes.map((item) => {
          if (item.name == "orderadd" || item.name == "inforentryppm") {
            item.meta.isFefresh = true;
          }
        });
        this.$store.commit("orders/SET_STEPACTIVE", 2);
        this.$store.commit('orders/SET_ELE_LABEL', this.orderCode);
        this.$router.push({
          path: "orderadd",
        });
      } else {
        // 没选择客户时提示
        this.$confirm("请先选择客户！", "提示", {
          confirmButtonText: "知道了",
          type: "warning",
          showCancelButton: false,
          center: true,
        }).then((done) => {
          done();
        });
      }
    },

    /**
     * 加载省客户关系
     */
    async loadCustList(pageInfo) {
      let condition = {
        qryType: "INTERFACE",
        PageFlag: "1", //固定
        custName: this.orderPosInfo.custName, //客户名称
        provRegionCode: this.user.regionCode,
        commonRegionId: this.user.regionId,
        listShowFlag: "orderShow", //固定
        ...pageInfo
      };
      const custData = await OrderService.provinceCustList(condition);
      return custData;
    },
    async prodOnSubmit(){
      let regionId = '';
      if(this.provdForm.city!==''){
        regionId = this.provdForm.city;
      }else{
        regionId = this.provdForm.province;
      }
      
      OrderService.syncProvinceCust({
        custId:this.orderPosInfo.custId,
        lanId:this.orderPosInfo.custMsg.regionId,
        regionId:regionId+''
      });
      this.goOrderAddPage();
    },

    /**
     * 打开省市选择
     */
    async openAutoAsyncPrompt() {
      this.loading = true;
      this.provdVisible = true;
      const result = await OrderService.getRegionCodeList({regionId:this.user.regionId,regionType:this.user.regionType});
      this.loading = false;
      if(result.meta){
        this.provdForm.provinceOpt = result.meta.proArr;
        this.provdForm.cityOpt = result.meta.lenArr;
        this.provdForm.province = this.provdForm.provinceOpt[0].regionId;
        if(this.provdForm.cityOpt.length==1){
          this.provdForm.city = this.provdForm.cityOpt[0].regionId;
        }
      }else{
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ne-sc-dialog .el-dialog__header .el-dialog__title{
  font-size: $fontSize_v2!important;
}
::v-deep .ne-prov-form.el-form--inline .el-form-item__label{
    display: inline-block;
    line-height: .4rem;
}
.title-box{
  color:#333;
  width: 1.2rem;
}
.cus-msg-box {
  height:100%;
  overflow:hidden;
  ::v-deep .el-tabs__header {
    margin: 0;
  }
  ::v-deep .el-tabs__content {
    padding: 0.2rem;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    border-width: 0 1px 1px 1px;
  }
  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav .el-tabs__item {
    font-size: $fontSize_v1;
    color: $textColor1;
  }
  ::v-deep .el-dialog__header {
    .el-dialog__title {
      font-size: 0.16rem;
      font-weight: 600;
      margin: 0.1rem 0 0.25rem 0;
    }
  }
  ::v-deep .el-dialog__body {
    padding: 0 0.2rem 0.2rem 0.2rem !important;
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: $textColor3;
    font-size: 0.15rem;
    font-weight: 600;
  }
  .m-content-box {
    min-height: 100vh;
    height: auto;
    margin: 0.1rem 0;
    padding: 0.2rem 0.2rem;
    background-color: #fff;
  }
  .cus-message-left {
    //overflow: hidden;
    margin-top: 0.1rem;
    //height: 100%;
    //height: calc(100vh - 0.4rem);
    box-shadow: 0px 2px 9px 0px rgba(205, 212, 228, 0.75);
    .ne-outer {
      height: 100%;
      min-height: 8.30rem;
      background-color: #fff;
      padding-top: 0.35rem;
      text-align: center;
      position: relative;
      background-image: url("~@/assets/imgs/order/cus-bg.png");
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: 100% auto;
      .cus-info {
        .image-box {
          border-radius: 50%;
          width: .9rem;
          height: .9rem;
          margin: 0 auto;
          background-color: #d9dbe1;
          .img-box {
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            background-color: #fff;
            position: relative;
            img {
              border-radius: 50%;
              width: 100%;
              height: auto;
            }
            &:after {
              content: "";
              display: inline-block;
              width: 0.3rem;
              height: 0.03rem;
              background: $blue;
              border-radius: 0.02rem;
              position: absolute;
              bottom: -0.2rem;
              left: 0;
              right: 0;
              margin: 0 auto;
            }
          }
        }

        .change-user {
          display: inline-block;
          width: 0.98rem;
          height: 0.28rem;
          line-height: 0.28rem;
          margin: 0.27rem 0 0.08rem 0;
          color: $textColor1;
          font-size: $fontSize_info;
          background: #eaf3fd;
          border: 0.01rem solid #e0e3e8;
          border-radius: 0.14rem;
          text-align: center;
          cursor: pointer;

          i {
            font-size: $fontSize_sm;
            margin-right: 0.03rem;
          }
          &:hover {
            background-color: $blue;
            color: #fff;
          }
        }

        .name {
          color: $textColor1;
          font-size: $fontSize_v1;
          font-weight: 600;
          padding: 0.25rem 0 0.2rem;
        }

        .info-spacific {
          width: 100%;
          padding: 0 0.2rem;
          box-sizing: border-box;

          p {
            text-align: left;
            font-size: $fontSize_base;
            color: $textColor3;
            margin: 0;
            //line-height: 2.5em;
            margin-bottom: 0.1rem;
            b {
              white-space: nowrap;
            }
            span {
              word-break: break-all;
              color: $textColor1;
            }
          }
        }
      }
      .cus-menu {
        margin: 0;
        padding: 0.1rem 0.25rem 0.15rem 0.25rem;
        li {
          padding: 0.08rem 0 0.08rem 0;
          display: inline-block;
          text-align: center;
          width: 50%;
          float: left;
          a {
            display: block;
            font-size: $fontSize_v2 !important;
            color: $textColor1;
            cursor: pointer;
            div.i-box-shadow {
              border-radius: 5px;
              overflow:hidden;
              width: 1.5rem;
              height: 0.4rem;
              line-height: 0.7rem;
              margin: auto;
              .i-box {

                width: 1.5rem;
                height: 0.4rem;
              }
            }
            i {
              display: inline-block;
              margin-left: 0.1rem;
              width: 0.23rem;
              height: 0.23rem;
              background-size: 100% auto;
              background-position: center;
              background-repeat: no-repeat;
              margin-top: 0.04rem;
              float:left;
            }
          }

          p {
            font-size: $fontSize_v1;
            color: $textColor2;
            text-align: center;
            margin-top: 0.1rem;
            //margin-bottom: 0.3rem;
          }
          .i-box-shadow {
            background-color: #fbffff;
            .m-box{
              width:0.32rem;
              height:0.32rem;
              // background:#fff;
              border-radius:50%;
            }
            .i-box {
              // background-color: #ecbf48;
              i {
                // background-image: url("~@/assets/imgs/order/o_budian.png");
              }
            }
          }
          &:nth-child(1) {
            .i-box-shadow {
              background-color: rgba(255, 241, 240,1);
              .i-box {
                background-color: #fff1f0;
                i {
                  background-image: url("~@/assets/imgs/order/icon-dg.png");
                }
              }
            }
          }
          &:nth-child(2) {
            .i-box-shadow {
              background-color: rgba(237, 242, 254,1);
              .i-box {
                background-color: #edf2fe;
                i {
                  background-image: url("~@/assets/imgs/order/icon-bd.png");
                }
              }
            }
          }
          &:nth-child(3) {
            .i-box-shadow {
              background-color: rgba(255, 249, 234,1);
              .i-box {
                background-color: #fff9ea;
                i {
                  background-image: url("~@/assets/imgs/order/icon-gndl.png");
                }
              }
            }
          }
           &:nth-child(4) {
            .i-box-shadow {
               background-color: rgba(233, 249, 248,1);
              .i-box {
                background-color: #e9f9f8;
                i {
                  background-image: url("~@/assets/imgs/order/icon-bl.png");
                }
              }
            }
          }

          &:nth-child(5) {
            .i-box-shadow {
              background-color: rgba(237, 242, 254,1);
              .i-box {
                background-color: #edf2fe;
                i {
                  background-image: url("~@/assets/imgs/order/icon-gmdlbg.png");
                }
              }
            }
          }

          &:nth-child(6) {
            .i-box-shadow {
              background-color: rgba(255, 241, 240,1);
              .i-box {
                background-color: #fff1f0;
                i {
                  background-image: url("~@/assets/imgs/order/icon-zcd.png");
                }
              }
            }
            p{
              margin-bottom: 0;
            }
          }

          &:nth-child(7) {
            .i-box-shadow {
              background-color: rgba(218, 108, 171, 0.3);
              .i-box {
                background-color: #da6cab;
                i {
                  background-image: url("~@/assets/imgs/order/o_zancundian.png");
                }
              }
            }
            p{
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
